<template>
  <view class="test-page">
    <view class="test-content">
      <text class="test-title">API 测试页面</text>
      
      <view class="test-section">
        <u-button type="primary" @click="testApiCall">测试 API 调用</u-button>
      </view>
      
      <view class="test-section">
        <u-button type="success" @click="testTagSelector">测试标签选择器</u-button>
      </view>
      
      <view class="result-section" v-if="apiResult">
        <text class="result-title">API 调用结果：</text>
        <text class="result-text">{{ JSON.stringify(apiResult, null, 2) }}</text>
      </view>
      
      <view class="error-section" v-if="apiError">
        <text class="error-title">API 调用错误：</text>
        <text class="error-text">{{ apiError }}</text>
      </view>
      
      <view class="result-section" v-if="selectedTags.length > 0">
        <text class="result-title">选中的标签enCode：</text>
        <text class="result-text">{{ JSON.stringify(selectedTags, null, 2) }}</text>
      </view>
      
      <view class="test-section" v-if="selectedTags.length > 0">
        <u-button type="warning" @click="testJobQuery">测试岗位查询（使用选中标签）</u-button>
      </view>
      
      <view class="result-section" v-if="jobQueryResult">
        <text class="result-title">岗位查询结果：</text>
        <text class="result-text">{{ JSON.stringify(jobQueryResult, null, 2) }}</text>
      </view>
    </view>
    
    <!-- 标签选择器 -->
    <TagSelector
      v-model:show="showTagSelector"
      v-model="selectedTags"
      @confirm="onTagConfirm"
    />
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { jobApi, dictionaryApi } from '@/api/api-helper.js'
import TagSelector from '@/components/TagSelector.vue'

const apiResult = ref<any>(null)
const apiError = ref<string>('')
const showTagSelector = ref(false)
const selectedTags = ref<string[]>([])
const jobQueryResult = ref<any>(null)

const testApiCall = async () => {
  try {
    console.log('开始测试 API 调用...')
    
    const params = {
      type: 'progress',
      currentPage: 1,
      pageSize: 10
    }
    
    console.log('API 参数:', params)
    
    const result = await jobApi.getListToApp(params)
    
    console.log('API 调用成功:', result)
    apiResult.value = result
    apiError.value = ''
    
  } catch (error) {
    console.error('API 调用失败:', error)
    apiError.value = error instanceof Error ? error.message : String(error)
    apiResult.value = null
  }
}

const testTagSelector = () => {
  showTagSelector.value = true
}

const onTagConfirm = (tags: string[]) => {
  selectedTags.value = tags
  console.log('选中的标签enCode:', tags)
}

const testJobQuery = async () => {
  try {
    console.log('开始测试岗位查询（使用选中标签）...')
    
    const params = {
      type: 'progress',
      currentPage: 1,
      pageSize: 10,
      label: selectedTags.value // 使用选中的标签enCode数组，設置到label字段
    }
    
    console.log('岗位查询参数:', params)
    
    const result = await jobApi.getListToApp(params)
    
    console.log('岗位查询成功:', result)
    jobQueryResult.value = result
    apiError.value = ''
    
  } catch (error) {
    console.error('岗位查询失败:', error)
    apiError.value = error instanceof Error ? error.message : String(error)
    jobQueryResult.value = null
  }
}
</script>

<style lang="scss" scoped>
.test-page {
  padding: 40rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.test-content {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
}

.test-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 40rpx;
  display: block;
}

.test-section {
  margin-bottom: 40rpx;
}

.result-section, .error-section {
  margin-top: 40rpx;
  padding: 20rpx;
  border-radius: 10rpx;
}

.result-section {
  background-color: #f0f9ff;
  border: 2rpx solid #0ea5e9;
}

.error-section {
  background-color: #fef2f2;
  border: 2rpx solid #ef4444;
}

.result-title, .error-title {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
}

.result-title {
  color: #0ea5e9;
}

.error-title {
  color: #ef4444;
}

.result-text, .error-text {
  font-size: 24rpx;
  color: #666;
  line-height: 1.5;
  word-break: break-all;
  white-space: pre-wrap;
}
</style> 